import { Box, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
import MainLayout from 'components/HOCs/main-layout';
import GFSTable from 'components/shared/tables/gfs-table';
import { format } from 'date-fns';
import NumberTool from 'libs/number-tool';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

import DisbursementAPI from '../../../api/disbursement/disbursement-manager';

const DisbursementPage = () => {
    const router = useRouter();
    const [disbursements, setDisbursements] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const load = async () => {
            setDisbursements(await DisbursementAPI.getAll());
            setLoading(false);
        };

        load().then();
    }, []);

    return (
        <MainLayout>
            <Box sx={{ pl: 6, pr: 6 }}>
                <Typography variant="h2" color="white" sx={{ pb: 3 }}>
                    Disbursements
                </Typography>

                <Box>
                    {disbursements ? (
                        <GFSTable>
                            <Table sx={{ minWidth: 650 }} aria-label="Disbursement List">
                                <TableHead>
                                    <TableRow>
                                        <TableCell align="center">Date</TableCell>
                                        <TableCell align="center">Title</TableCell>
                                        <TableCell align="center">Amount</TableCell>
                                        <TableCell align="center">Status</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {disbursements.map((row) => (
                                        <TableRow
                                            key={row.id}
                                            sx={{
                                                '&:last-child td, &:last-child th': { border: 0 }
                                            }}
                                            hover={true}
                                            onClick={() =>
                                                router.push(`/ui/transactions/${row.id}`)
                                            }
                                        >
                                            <TableCell align="center">
                                                {row.timestamp_last_saved &&
                                                    format(
                                                        row.timestamp_last_saved,
                                                        'MM / dd / yyyy'
                                                    )}
                                            </TableCell>
                                            <TableCell align="center">{row.title}</TableCell>
                                            <TableCell align="center">
                                                {NumberTool.format(row.total_amount)} {row.currency}
                                            </TableCell>
                                            <TableCell align="center">
                                                {row.done_disbursing
                                                    ? 'Done disbursing'
                                                    : 'Not done'}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </GFSTable>
                    ) : (
                        <Typography className="text-white mt-4">
                            {loading ? 'Loading...' : 'No disbursements yet...'}
                        </Typography>
                    )}
                </Box>
            </Box>
        </MainLayout>
    );
};

export default DisbursementPage;
